<template>
        <div>
                <div class="bg-blue-600 p-4 text-white">
                        <p class="p-4">
                        <h2>个人中心</h2>
                        </p>
                        <div class="flex justify-center items-center">
                                <t-avatar class="avatar-example--large" shape="circle" size="large"
                                        image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="示例图片"
                                        :badge-props="{ count: 10 }"></t-avatar>
                        </div>
                        <div>用户:张三</div>
                        <div>工号：no001</div>
                </div>
                <div>
                        <t-grid :column="4" theme="card" class="grid-demo">
                                <t-grid-item text="历史任务" :image="imgUrl" description="描述文字" />
                                <t-grid-item text="外呼统计" :image="imgUrl" description="描述文字" />
                                <t-grid-item text="成功统计" :image="imgUrl" description="描述文字" />
                                <t-grid-item text="失败统计" :image="imgUrl" description="描述最多六字" />
                        </t-grid>
                </div>
                <div style="height:200px"></div>
                <div>
                        <div class="row">
                                <t-button size="large" block theme="danger" @click="logout">退出登录</t-button>
                        </div>
                </div>
                <div style="height:120px;">

                </div>
        </div>

</template>

<script setup lang='ts'>
const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png';
const logout = () => {
        // 清空缓存
        localStorage.clear();
        window.location.href = '/#/auth/login'
}
</script>

<style lang="scss">
.avatar-demo {
        margin-left: 16px;
        margin-bottom: 16px;

        .avatar-example--small:not(:last-child) {
                margin-right: 56px;
        }

        .avatar-example--medium:not(:last-child) {
                margin-right: 48px;
        }

        .avatar-example--large:not(:last-child) {
                margin-right: 32px;
        }

        .external-class-content {
                .t-avatar {
                        color: #fff;
                        background-color: #0052d9;
                        font-weight: 400;
                }
        }
}

.row {
        display: flex;
        padding: 0 16px;
}
</style>